<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div class="header">
    <h1>中国动物保护协会</h1>
</div>



<div class="center">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>

</div>

</body>
<style type="text/css">
    .header{
        width: 100%;
        height: 150px;
        border: 2px slateblue solid;
    }
    .header :hover{
        background-color: aquamarine;
    }


    h1{
        text-align: center;
        color: brown;
    }

    .center{
        display: flex;
        flex-wrap: wrap;
        /*垂直居中*/

        height: 300px;
        /*border: brown 2px solid;*/
    /*    外边距*/
        margin: 50px auto;
    }

    .one{
        width: 200px;
        height: 100px;
        border: blue 2px solid;
        overflow: hidden;
    }

    .two{
        width: 800px;
        height: 100px;
        border: coral 2px solid;
    }
    
    
    @keyframes cycle {
        0% {

        }
    }

</style>
</html>